<template>
	<div class="person-chart-box">
		<div id="personChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

// 月份
let xArr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
let dataArr = ref([
	1100, 2000, 1000, 1300, 1020, 2500, 3005, 2609, 3600, 4080, 3800, 4200,
]);

let options = reactive({
	grid: {
		right: "15%",
		top: "18%",
		bottom: "10%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				type: "solid",
				width: 20,
				color: "rgba(216,240,255,0.1)",
			},
		},
		className: "tooltipBox",
		backgroundColor: "transparent",
		textStyle: {
			color: "#D8F0FF",
			textShadowColor: "#3FBFFF",
			textShadowBlur: 2,
		},
		padding: [3, 12, 3, 12],
		borderWidth: 0,
		formatter: (params) => {
			let res = "";
			for (let i = 0; i < params.length; i++) {
				res += `<span>${params[i].value}</span>`;
			}
			return res;
		},
	},
	xAxis: {
		type: "category",
		data: xArr.value,
		name: "单位（月）",
		nameTextStyle: {
			color: "#D3E3FF",
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: true,
			color: "rgba(176,215,255,0.4)",
		},
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（人）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.8)",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
					type: "dashed",
				},
			},
		},
	],
	series: [
		{
			type: "line",
			smooth: true,
			data: dataArr.value,
			showSymbol: false,
			itemStyle: {
				color: "#00D3FD",
			},
			lineStyle: {
				color: "#00D3FD",
			},
			areaStyle: {
				color: {
					x: 0, //右
					y: 0, //下
					x2: 0, //左
					y2: 1, //上
					colorStops: [
						{
							offset: 0,
							color: "rgba(24,255,239,0.6)",
						},
						{
							offset: 1,
							color: "rgba(0,150,255,0)",
						},
					],
				},
			},
		},
	],
});

let personChartRef = null;
let initPersonChartData = (v) => {
	const months = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
	v.map((item) => {
		const { number, month } = item;
		const m = +month;
		months[m - 1] += number;
	});
	dataArr.value.splice(0);
	dataArr.value.push(...months);
	personChartRef.setOption(options);
};
const initChart = (v) => {
	if (!personChartRef)
		personChartRef = echarts.init(document.getElementById("personChart"));
	initPersonChartData(v);
};
defineExpose({
	initChart,
});
</script>
<style lang="scss" scoped>
.person-chart-box {
	width: 100%;
	height: 100%;
	#personChart {
		width: 100%;
		height: 100%;
		:deep(.tooltipBox) {
			background: url("@/assets/screenImg/powerImg/leftBg.png") no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>
